<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>租借汽车</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/homepage.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .searchbar{
        text-align: center;
    }
    .table-item{
        text-align: center;
    }
</style>
<body>
<div th:include="headbar::customer_headbar" style="margin-bottom:70px"></div>
<!--<div style="padding: 20px 550px 10px">-->
<div class="searchbar" >
<!--   搜索框-->
<!--    method="post" action="/cars/customer_list/query"-->
    <form  class="form-inline"  id="searchForm">
        <div class="input-group">
            <input type="text" placeholder="输入汽车车型" class="form-control" name="searchWord" id="searchWord">
            <span class="input-group-btn">
                <input type="submit" value="搜索" class="btn btn-default" >
            </span>
        </div>
    </form>
</div>

<div class="panel panel-default" style="width: 90%;margin-left: 5%">
    <div class="panel-heading">
        <h3 class="panel-title" style="text-align:center">汽车列表</h3>
    </div>
    <div class="panel-body">
        <table class="table table-hover" style="text-align:center">
            <thead>
            <tr>
                <th class="table-item">汽车品牌</th>
                <th class="table-item">车型</th>
                <th class="table-item">车牌号</th>
                <th class="table-item">颜色</th>
                <th class="table-item">价格/天</th>
                <th class="table-item">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr  th:each="car: ${list}" >
                <td th:text="${car.carBrand}" class="table-item"></td>
                <td th:text="${car.carModel}" class="table-item"></td>
                <td th:text="${car.licensePlate}" class="table-item"></td>
                <td th:text="${car.color}" class="table-item"></td>
                <td th:text="${car.price}" class="table-item" ></td>
                <td class="table-item" >
<!--                    //已借出：0，可借：1，维护中：2，-->
                    <button th:classappend="${car.status == 1 ? 'btn-info' : 'btn-danger'}"
                            data-toggle="modal" data-target="#rend"
                            th:attr="carId=${car.carId},rate-val=${user.getDiscountRate()}"
                            th:text="${car.status == 1 ? '租借' :(car.status == 2?'维护中' :'已借出')}"
                            th:disabled="${car.status != 1}"
                            onclick="fillModalData(this)">
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


<!--rend租借弹窗-->
<div id="rent" class="modal fade" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">支付界面</h1>
            </div>
            <div class="modal-body">
                <form id="form-pay" > <!--$.ajax-->
                    <div class="form-group has-feedback">
                        <label for="ad-carBrand">品牌</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-carBrand" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-carModel">型号</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-carModel" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-licensePlate">车牌号</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-licensePlate" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-color">颜色</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-color" class="form-control" readonly>
                        </div>
                    </div>


                    <div class="form-group has-feedback">
                        <label for="ad-rentDays">租借天数</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-rentDays" class="form-control" onchange="changePriceByDays(this)" required>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-total">原价</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-total" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-rate">会员折扣</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-rate" class="form-control"  readonly>
                        </div>
                    </div>

                    <div class="form-group has-feedback">
                        <label for="ad-pays">应付</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input id="ad-pays" class="form-control" readonly>
                        </div>
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary"  id="btn-pay" >支付</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
<script>
    //搜索
    $(document).ready(function() {

        const form = $('#searchForm');

        form.on('submit', function(e) {
            e.preventDefault();


            var searchWord = $('#searchWord').val();


            // 保存搜索关键词
            sessionStorage.setItem('searchWord', searchWord);


            $.ajax({
                url: '/cars/customer_list/query',
                method: 'post',
                data: {searchWord:searchWord  },
                dataType:"html",
                success: function(response)
                {
                    // $("html").html(response);
                    document.open();
                    document.write(response);
                    document.close();
                },
                error: function(xhr, status, error) {
                    alert('搜索失败！');
                }

            });
        });
    });
</script>
<script>


    var selectedPrice;
    var carId;
    //支付界面自动填充
    function fillModalData(button ) {


        // 获取选中的行
        var selectedRow = $(button).closest('tr');

        carId = button.getAttribute("carId");
        rate = button.getAttribute("rate-val");
        // 获取选中行中每个单元格的数据
        var carBrand = selectedRow.find('td:eq(0)').text();
        var carModel = selectedRow.find('td:eq(1)').text();
        var licensePlate = selectedRow.find('td:eq(2)').text();
        var color = selectedRow.find('td:eq(3)').text();
        selectedPrice = selectedRow.find('td:eq(4)').text();

        // 将数据填充到弹窗中的表单中
        $('#ad-carBrand').val(carBrand);
        $('#ad-carModel').val(carModel);
        $('#ad-licensePlate').val(licensePlate);
        $('#ad-color').val(color);
        //默认days='',total=0
        $('#ad-rentDays').val('');

        $('#ad-rate').val(rate);
        $('#ad-total').val('0');
        $('#ad-pays').val('0');
        //显示弹窗
        $('#rent').modal('show');
    }
    function getPrice() {
        return selectedPrice;
    }


    function checkForm() {
        const rentDays= $('#ad-rentDays').val();
        if ( !(/^[1-9]\d*$/.test(rentDays))) {
            $('#ad-rentDays').val("");
            alert("请输入整数");
            return false;
        }
        return true;
    }


    //自动计算价格根据天数
    function changePriceByDays(element){

        if(!checkForm()) return false;
        //单价
        var price =  getPrice();

        var rentDays= element.value;
        if(rentDays === '') {
            $('#ad-total').val(0);
            $('#ad-pays').val(0);
        }
        else {
            var total = parseFloat(price)  * parseInt(rentDays);

            var rate = $('#ad-rate').val();
            $('#ad-total').val(total);
            $('#ad-pays').val(total * parseFloat(rate));

        }

        // console.log(price);
        // console.log(rentDays);
        // console.log(total);
        // console.log($('#ad-total').val());

    }



    //支付提交请求
    $(document).ready(function() {

        const form = $('#form-pay');

        form.on('submit', function(e) {
            e.preventDefault();

            if(!checkForm()) return false;


            var days = $('#ad-rentDays').val();
            // var price = $('#ad-total').val();

            var currentDate = new Date(); // 创建一个新的 Date 对象
            var afterDaysDate = new Date();
            afterDaysDate.setDate(currentDate.getDate() + parseInt(days,10));
            console.log(afterDaysDate);
            var borrowDate = currentDate.toLocaleDateString();
            var returnDate = afterDaysDate.toLocaleDateString();


            var pays = $('#ad-pays').val();


            $.ajax({
                url: '/cars/rent',
                method: 'POST',
                data: {carId:carId, borrowDate:borrowDate,returnDate:returnDate,pays:pays },
                success: function(response) {
                    alert('成功租借！');
                    window.location.href = response; // 重定向到指定页面 customer_list;
                },
                error: function(xhr, status, error) {
                    alert("租借失败！");
                    window.location.href = "/cars/customer_list" // 重定向到指定页面 customer_list;

                }
            });
        });
    });


</script>
</body>
</html>